/*
 * Copyright 2021 ThoughtWorks, Inc.
 *
 * Licensed under the Apache License, Version 2.0 (the "License");
 * you may not use this file except in compliance with the License.
 * You may obtain a copy of the License at
 *
 *     http://www.apache.org/licenses/LICENSE-2.0
 *
 * Unless required by applicable law or agreed to in writing, software
 * distributed under the License is distributed on an "AS IS" BASIS,
 * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
 * See the License for the specific language governing permissions and
 * limitations under the License.
 */
@import "../../global/common";

$passed:                    #00c853;
$background:                #fff;
$stage-width:               82px;
$border-color:              #ccc;
$disabled-text-color:       #999;
$stage-status-unknown:      #fafafa;
$build-details-z-index:     5;
$modification-text-color:   #ff6;
$dropdown-background-color: #333;
$disabled-icon-color:       #e0e0e0;
$stage-status-bar-z-index:  2;
$stage-action-icon-z-index: 1;

.pipeline-activity {
  display: flex;
  width:   100%;
}

.pipeline-activity-table {
  overflow-x: auto;
  background: $background;
  padding:    16px;
  width:      100%;
}

.group-header,
.group-content {
  display:        flex;
  flex-direction: row;
  width:          max-content;
  min-width:      100%;
  padding-bottom: 2px;
  border-bottom:  1px dashed $border-color;

  .left {
    display:         flex;
    flex-direction:  column;
    justify-content: center;
    width:           20%;
    max-width:       200px;
    min-width:       200px;
    margin-right:    16px;
    padding-bottom:  5px;
  }

  .right {
    display:       flex;
    padding-right: 16px;
  }
}

.group-header {
  font-size:   12px;
  font-weight: 600;
}

.header {
  font-size:   12px;
  font-weight: 600;
}

.stage-name {
  display:     flex;
  width:       $stage-width;
  word-break:  break-all;
  line-height: 1.22em;
  align-self:  center;
  min-width:   $stage-width;

  &:last-child {
    margin-right: 0;
  }
}

.run {
  width:           100%;
  display:         flex;
  flex-direction:  row;
  justify-content: space-between;
  font-size:       16px;

  a {
    font-size:       14px;
    text-decoration: none;
    color:           $link-color;
  }
}

.group-content {
  .revision {
    overflow:      hidden;
    font-size:     12px;
    white-space:   nowrap;
    text-overflow: ellipsis;
  }

  .schedule-info {
    font-size: 12px;
  }
}

.disabled {
  color: $disabled-text-color;
}

.stage-box-pipeline-activity {
  max-width:       $stage-width + 50px;
  height:          100%;
  display:         flex;
  align-items:     center;
  justify-content: center;
}

.stage-status {
  display:       block;
  width:         82px;
  height:        12px;
  border-radius: 2px;
  z-index:       $stage-status-bar-z-index;
}

.stage-status-wrapper {
  display:         flex;
  height:          100%;
  position:        relative;
  flex-direction:  column;
  justify-content: center;
}

.disabled-icon {
  color: $disabled-icon-color;

  &:hover {
    color: $disabled-icon-color;
  }
}

.unknown, .building, .cancelled, .failed, .passed, .waiting, .failing {
  color: $white;
  cursor: pointer;

  &:before {
    position: absolute;
    left:     35px;
  }
}

.unknown {
  background: $stage-status-unknown;
  border:     1px solid $border-color;
  cursor:     auto;
  width:      80px;      // compensating for border
}

.building {
  background: transparent url('../../../../app/assets/images/building.gif') repeat-x;
}

.failing {
  background: $failed url('../../../../app/assets/images/failing.gif') repeat-x;
}

.cancelled {
  @include icon-before($fa-var-ban, 12px, 0);
  color:      $black;
  background: transparent url('../../../../app/assets/images/building.png') repeat-x;
}

.failed {
  @include icon-before($fa-var-info-circle, 12px, 0);
  background: $failed;
}

.passed {
  @include icon-before($fa-var-check, 12px, 0);
  background: $passed;
}

.waiting {
  @include icon-before($fa-var-spinner, 12px, 0);
  color:      $black;
  background: transparent url('../../../../app/assets/images/building.png') repeat-x;

  &:before {
    animation: spin 1500ms linear infinite;
  }
}

@keyframes spin {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}

.build-cause-button {
  color:     $link-color;
  cursor:    pointer;
  font-size: 12px;
}

.close-button-wrapper {
  button {
    position:   absolute;
    width:      22px;
    height:     22px;
    right:      15px;
    top:        5px;
    background: $go-darkblue;

    i:before {
      margin:    -5px;
      font-size: 14px;
    }

    &:hover {
      background: $btn-danger;
    }
  }
}

.build-details {
  position:       absolute;
  background:     $dropdown-background-color;
  color:          $white;
  width:          50%;
  padding:        10px 16px;
  border-radius:  3px;
  display:        flex;
  z-index:        $build-details-z-index;
  flex-direction: column;

  .material-revision-dropdown-content {
    width:          100%;
    display:        flex;
    flex-direction: column;
    font-size:      12px;
  }

  .material-header {
    display:         flex;
    justify-content: space-between;
    width:           100%;
    padding:         0 0 5px;
    font-size:       12px;
    word-break:      break-all;
    border-bottom:   1px solid $border-color;
  }

  .modifications {
    margin-bottom: 10px;
    border-bottom: 1px dotted $border-color;
  }

  .modification {
    display:         flex;
    font-size:       12px;
    font-weight:     400;
    width:           100%;
    justify-content: space-between;
    border-bottom:   1px dotted $border-color;

    &:last-of-type {
      border: none;
    }

    .revision,
    .comment,
    .user {
      width:         20%;
      padding:       3px 0;
      overflow:      hidden;
      text-overflow: ellipsis;
      align-content: center;
    }

    .comment {
      width:      40%;
      max-height: 6.4em;
      padding:    3px 10px;

      a {
        color: $link-color;
      }
    }
  }

  .changed {
    color: $modification-text-color;

    .modification {
      border-color: $modification-text-color;
    }
  }
}

.force-build {
  .left {
    align-items: self-start;
    padding:     10px 0;
  }
}

.pagination-wrapper {
  display:    flex;
  margin-top: 20px;
}

.page-header {
  display: flex;

  .pipeline-info {
    display:        flex;
    flex-direction: column;
    height:         100%;

    .label {
      font-size: 0.625rem;
    }

    .value {
      font-size:     15px;
      text-overflow: ellipsis;
      white-space:   nowrap;
      max-width:     200px;
      overflow:      hidden;
    }
  }

  .icon-container {
    display:    flex;
    margin:     0 10px;
    align-self: center;
  }

  .pause-message {
    align-self:    center;
    font-size:     11px;
    font-weight:   normal;
    max-width:     400px;
    white-space:   nowrap;
    overflow:      hidden;
    text-overflow: ellipsis;
  }
}

.pipeline-run-comment {
  display:       flex;
  padding:       5px 10px;
  word-break:    break-word;
  overflow-y:    auto;
  margin:        10px 0;
  min-height:    100px;
  max-height:    400px;
  border:        1px dashed $border-color;
  border-radius: 3px;
}

.no-margin {
  margin-left: 0;
}

.margin-23 {
  margin-left: 23px;
}

.manual-wrapper {
  width:      23px;
  text-align: center;
}
